<template>
	<!-- 详情页面 -->
	<view class="container">
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
					<view class="image-wrapper">
						<image :src="item" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="introduce-section">
			<text class="title">{{lista.title}}</text>
			<view class="price-box">
				<text class="price-tip">¥</text>
				<text class="price">{{lista.price/100}}</text>
				<text class="m-price">¥{{lista.originalPrice/100}}</text>
				<text class="coupon-tip">{{((lista.price / lista.originalPrice) * 10).toFixed(1)}}折</text>
			</view>
			<view class="bot-row">
				<text>销量: {{lista.sales}}</text>
				<text>库存: {{lista.stock}}</text>
			</view>
		</view>
		<!--  分享 -->
		<view class="c-list">
			<view class="c-row " @click="toggleSpec">
				<text class="tit">购买类型</text>
				<view class="con">
					<text class="selected-text">
						{{sputitile}}
					</text>
				</view>
				<text class="iconfont icon-arrow"></text>
			</view>
			<view class="c-row b-b" @click="toggleSpec1"> </text>
				<text class="tit">优惠券</text>
				<text class="con t-r red">领取优惠券</text>
				<text class="iconfont icon-arrow"></text>
			</view>
			<view class="c-row">
				<text class="tit">配送费用</text>
				<view class="bz-list con">
					<text>单笔购买满¥0元免邮费</text>
				</view>
			</view>
			<view class="c-row" v-for="(item,index) in lista.attributeList" :key='index'>
				<text class="tit">{{item.attribute}}</text>
				<text class="con">{{item.value}}</text>
			</view>
		</view>
		<!-- 评价 -->
		<view class="eva-section" v-for="(item,index) in arr" :key="index">
			<view class="e-header">
				<text class="tit">评价({{arr.length}})</text>
				<text class="tip">全部评价</text>
				<text class="iconfont icon-arrow"></text>
			</view>
			<view class="eva-box">
				<image class="portrait" :src='item.userAvatarUrl' mode="aspectFill"></image>
				<view class="right">
					<text class="name">{{item.userNickName}}</text>
					<text class="con">{{item.content}}</text>
					<view class="bot">
						<text class="attr">购买类型：{{item.skuTitle}}</text>
						<text class="time">{{item.gmtCreate}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-desc">
			<view class="d-header">
				<text>图文详情</text>
			</view>
			<!-- 下面的图文详情图片 -->
			<rich-text :nodes="desc" style="line-height: 0; font-size: 37rpx;"></rich-text>
		</view>
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<navigator url="/pages/home/home" open-type="switchTab" class="p-b-btn">
					<image src="../../static/shoytp/tab-home.png" class="p-b-btn-img"><image>
					<text>首页</text>
			</navigator>
			<navigator url="/pages/Shopping/Shopping" open-type="switchTab" class="p-b-btn">
				<image src="../../static/shoytp/cart-off.png.png" class="iconfont icon-gouwuchekong"></image>
				<text>购物车</text>
			</navigator>
			<view class="p-b-btn" :class="{active: favorite}" @click="toFavorite">
				<image class="iconfont" :src="favorite == true ? img_off : img_on"></image>
				<text>收藏</text>
				 
			</view>
			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy(1)">立即购买</button>
				<button type="primary" class=" action-btn no-border add-cart-btn" @click="inner(2)">加入购物车</button>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="popup" :class="specClass" @click="toggleSpec" @touchmove.stop.prevent="stopPrevent">
			<view class="mask">123</view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image :src="lista.img"></image>
					<view class="right">
						<text class="price">¥ {{specSelected[current].price/100}}</text>
						<text class="stock">库存：{{specSelected[current].stock}}</text>
						<view> 已选：<text> {{specSelected[current].title}} </text> </view>
					</view>
				</view>
				<view class="attr-list">
					<text>规格</text>
					<view class="item-list">
						<text v-for="(item, index) in specSelected" :key="index" class="tit" :class="current==index ? 'actionkr' : ''"
						 @click="swichNav(index)">
							{{item.title}}
						</text>
					</view>
					<text>数量</text>
					<view class="buy-num">
						<view class="jian-btn" @tap="jianBtnTap" :data-index="index">-</view>
						<input type="number" :value="num"></input>
						<view class="jia-btn" @tap="jiaBtnTap" :data-index="index">+</view>
					</view>
				</view>
				<button class="btn" @click="ok">完成</button>
			</view>
		</view>
		<view class="popurp" :class="specClass1" @click="toggleSpec1">
			<view class="mask" @click="toggleSpec1"></view>
			<view @click.stop="stopPrevent" class="Angle">
				<scroll-view scroll-y="true" class="scroll-Y" style="height: 100%;width: 100%;">
					<view class="coupon" v-for="(item,index) in distar" :key="index" @click="getcoupon(item)">
						<view class="c-sort">
							<view class="c-left">
								<view>{{item.title}}</view>
								<view style="color: #909399;">在领取后{{item.days}}天内有效。可领{{item.limit}}张，已领{{item.nowCount}}张</view>
							</view>
							<view class="c-right">
								<view>￥{{item.discount/100}}</view>
								<view style="font-size: 26rpx;color: #909399;">满{{item.min/100}}可用</view>
							</view>
						</view>
						<view class="c-bottom" v-html="item.categoryTitle != '' && item.categoryTitle != undefined ? '限'+item.categoryTitle+'使用':'全品可用'"></view>
					</view>
				</scroll-view>
			</view>
		</view> 
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				specClass: 'none',//遮罩层购买类型
				specClass1: 'none',//遮罩层
				specSelected: [],//购买类型//帮安装，仅授权
				favorite: null,//判断图片的切换
				imgList: [],//轮播图图片
				desc: '',//图文闲情
				lista: [],//内容数据
				id: '',
				arr: [],//评论
				num: 1,
				distar: [],//获取用户可领取优惠券 和领取优惠劵
				sputitile: '请选择',
				text1: '',//提示添加购物车添加成功
				current: 0,//购买类型//帮安装，仅授权,数组的下表
				bool: null,//赋值判断是1还是2，是1的话就是立即购买，是2的话就是添加购物车
				img_on:'../../static/gwcymian/shouc.png',//收藏图片切换1
				img_off:'../../static/gwcymian/shoychs.png'//收藏图片切换2
			};
		},
		onLoad(options) {
			if (options.dataset != null) {
				console.log(options.dataset)
				this.id = options.dataset
			} else if (options.oid != null) {
				let id = JSON.parse(options.oid)
				this.id = id
			} else if (options.page != null) {
				let id = JSON.parse(options.page)
				this.id = Number(id)
			} else {
				let id = JSON.parse(options.id)
				this.id = id
			}
			//接收传值
			this.init()
			this.Discount()
			// 查询收藏
			uni.request({
				url: `http://192.168.1.54:8081/m.api?_gp=collect&_mt=getCollectBySpuId&spuId=${this.id}`,
				header: {
					'accesstoken': uni.getStorageSync('accessToken')
				},
				success: (res) => {
					this.favorite = res.data.data
				}
			})
		},
		onShow() {
			if (uni.getStorageSync('accessToken') == '') {//判断token值是否登入
				uni.showModal({
					title: '登录提示',
					content: '您尚未登录，是否立即登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({//没有登入的话就跳的登入页面，但不过有选择确定还是取消
								url: '../long/long'
							})
							return
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}
		},
		methods: {
			init() {
				uni.request({
					url: 'http://192.168.1.54:8081/m.api?_gp=goods&_mt=getGoods&spuId=' + this.id,
					method: 'GET',
					header: {
						'accesstoken': uni.getStorageSync('accessToken')
					},
					success: (res) => {
						this.imgList = res.data.data.imgList // 轮播图图片
						this.lista = res.data.data // 内容数据
						// console.log(this.lista,"9484848484848484848")
						this.arr = res.data.data.appraisePage.items //评论
						this.desc = res.data.data.detail //商品详情
						this.specSelected = res.data.data.skuList //购买类型//帮安装，仅授权
						var asd = this.desc.replace(/\<img/gi, '<img class="richImg"');
						this.desc = asd
					}
				})
			},
			open() {
				uni.showToast({
					title: this.text1,//提示添加购物车添加成功
				})
			},
			// 加入购物车
			inner(a) {
				this.bool = a
				if (this.sputitile == '请选择') {
					this.toggleSpec()//调用弹窗的开关
				} else {
					let that = this//生命一个this指定
					// console.log(this.specSelected[this.current].id, this.num)
					uni.request({
						url: 'http://192.168.1.54:8081/m.api?_gp=cart&_mt=addCartItem&skuId=' + that.specSelected[that.current].id + '&num=' + that.num,
						header: {
							'accesstoken': uni.getStorageSync('accessToken')
						},
						success: (res) => {
							if (res.data.errmsg) {
								this.text1 = '添加购物车成功！'//提示添加购物车添加成功
								this.open()//调用添加购物车的提示信息
							}
						}
					})
				}
			},
			// --url /m.api?_gp=coupon&_mt=getObtainableCoupon 
			// --header access_token=
			// 获取用户可领取优惠券
			Discount() {
				uni.request({
					url: 'http://192.168.1.54:8081/m.api?_gp=coupon&_mt=getObtainableCoupon',
					header: {
						'accesstoken': uni.getStorageSync('accessToken')
					},
					success: (res) => {
						this.distar = res.data.data
					}
				})
			},
			// 领取优惠劵
			// --url /m.api?_gp=coupon&_mt=getUserCoupons 
			// --header access_token=
			getcoupon(e) {
				let _this = this
				uni.request({
					url: `http://192.168.1.54:8081/m.api`,
					data:{
						"_gp":"coupon",
						"_mt":"obtainCoupon",
						"couponId":e.id
					},
					header: {
						'accesstoken': uni.getStorageSync('accessToken')
					},
					success: (res) => {
						_this.Discount()
						_this.distar = res.data.data
						_this.text1 = res.data.errmsg
						if (res.data.errmsg == '成功') {
							setTimeout(() => {
								this.specClass1 = 'none'
							}, 1500);
						}
						_this.open()//调用到提示信息
					}
				});
			},
			ok() { //完成
				this.specClass = 'none';
				if (this.sputitile == '请选择') {
					this.sputitile = this.specSelected[0].title
				}
				if (this.bool == 1) {
					let titles = {
						fixmor: this.fixmor,
						img: this.lista.img,
						num: this.num,
						Title: this.lista.title,
						vipPrice: this.lista.vipPrice,
						categoryId: this.lista.categoryId,
						categoryIds: this.lista.categoryIds
					}
					let obj = {}
					this.arr.push(obj)
					Object.assign(obj, titles, this.specSelected[this.current])
					let list = JSON.stringify(this.arr)
					uni.navigateTo({
						url: '../buynow/buynow?specSelected=' + list + '',
					})
					this.arr = []
				} else {
					this.inner()
				}
			},
			//规格弹窗开关
			toggleSpec() {
				if (this.specClass === 'show') {
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
				}
			},
			toggleSpec1() {
				if (this.specClass1 === 'show') {
					this.specClass1 = 'hide';
					setTimeout(() => {
						this.specClass1 = 'none';
					}, 250);
				} else if (this.specClass1 === 'none') {
					this.specClass1 = 'show';
				}
			},
			//立即购买
			buy(a) {
				this.bool = a
				if (uni.getStorageSync('accessToken') == '') {
					uni.showModal({
						title: '提示',
						content: '请先登录！！',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '../long/long'
								})
								return
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					})
					return
				} else if (this.sputitile == '请选择') {
					this.toggleSpec()
				} else {
					let titles = {
						fixmor: this.fixmor,
						img: this.lista.img,
						num: this.num,
						Title: this.lista.title,
						vipPrice: this.lista.vipPrice,
						categoryId: this.lista.categoryId,
						categoryIds: this.lista.categoryIds
					}
					let obj = {}
					this.arr.push(obj)
					Object.assign(obj, titles, this.specSelected[this.current])
					let list = JSON.stringify(this.arr)
					uni.navigateTo({
						url: '../buynow/buynow?specSelected=' + list + ''
					})
					this.arr = []
				}
			},
			//收藏
			toFavorite() {
				if (this.favorite == false) {
					uni.request({
						url: `http://192.168.1.54:8081/m.api?_gp=collect&_mt=addCollect&spuId=${this.id}`,
						header: {
							'accesstoken': uni.getStorageSync('accessToken')
						},
						success: (res) => {
							this.favorite = true
						}
					})
				} else {
					uni.request({
						url: `http://192.168.1.54:8081/m.api?_gp=collect&_mt=deleteCollect&spuId=${this.id}`,
						header: {
							'accesstoken': uni.getStorageSync('accessToken')
						},
						success: (res) => {
							this.favorite = false
						}
					})
				}
			},
			swichNav(index) {
				this.current = index
				this.sputitile = this.specSelected[this.current].title
			},
			stopPrevent() {},
			/* 点击减号 */
			jianBtnTap: function(e) {
				var num = this.num--;
			},
			/* 点击加号 */
			jiaBtnTap: function(item) {
				var reduce = this.num++;
			},
		},
	}
</script>

<style scoped="scoped">
	.popurp.none {display: none;}
	.popurp.show {display: block;}
	.popup.show {display: block;}
	.Angle {width: 100%;height: 900rpx;position: relative;z-index: 999999999;background-color: #f4f4f4;}
	.popup.show .mask {animation: showPopup 0.2s linear both;}
	.popup.show .layer,.popurp.show .Angle {animation: showLayer 0.2s linear both;}
	.popup.hide .mask {animation: hidePopup 0.2s linear both;}
	.popup.hide .layer,.popurp.hide .Angle {animation: hideLayer 0.2s linear both;}
	.popup.none {display: none;}
	.popurp {width: 100%;position: fixed;top: 314rpx;z-index: 99999;transition-duration: 3s;}
	.pop {position: fixed;top: 1514rpx;transition-duration: 3s;}
	.coupon {width: 90%;height: 200rpx;margin: auto;margin-top: 24rpx;background: #FFFFFF;margin-bottom: 24rpx;z-index: }
	.c-sort {display: flex; height: 70%; padding: 0 20rpx; border-bottom: 1px dashed #F6F6F6;}
	.c-left {font-size: 26rpx;width: 82%;margin: auto 0;}
	.c-left view:nth-child(1) {font-size: 28rpx;}
	.c-right {width: 18%;margin: auto 0;text-align: center;}
	.c-right view:nth-child(1) {color: #ff0000;font-size: 32rpx;}
	.c-bottom {padding-left: 20rpx;font-size: 26rpx;color: #909399;height: 30%;}

	/* 顶部轮播图 */
	page {padding-bottom: 160rpx;}
	.carousel {height: 636rpx;position: relative;}
	.carousel swiper {height: 100%;}
	.image-wrapper {width: 100%;height: 100%;}
	.loaded{width: 100%; height: 650rpx;}
	.swiper-item {display: flex;justify-content: center;align-content: center;height: 750rpx;overflow: hidden;}

	.swiper-item image {width: 100%;height: 10}

	/* 标题简介 */
	.introduce-section {background: #fff;padding: 20rpx 30rpx;}
	.introduce-section .title {font-size: 30rpx;color: #303133;height: 46rpx;line-height: 46rpx;}
	.price-box {display: flex;align-items: baseline;height: 60rpx;padding: 10rpx 0;font-size: 24rpx;color: #fa436a;}
	.price {font-size: 32rpx;}
	.m-price {margin: 0 12rpx;color: #909399;text-decoration: line-through;}
	.coupon-tip {align-items: center;padding: 4rpx 10rpx;background: #fa436a;font-size: 22rpx;color: #fff;border-radius: 6rpx;line-height: 1;transform: translateY(-4rpx);}
	.bot-row {display: flex;align-items: center;height: 44rpx;font-size: 22rpx;color: #909399;}
	.bot-row text {flex: 1;}
	/* 分享 */
	.c-list {font-size: 24rpx; color: #606266;background: #fff;}
	.c-row {display: flex; align-items: center; padding: 20rpx 30rpx;position: relative;}
	.tit {width: 140rpx;}
	.actionkr {color: #fa436a !important;}
	.con {flex: 1; color: #303133;}
	.red {color: red;}
	.con .selected-text {margin-right: 10rpx;}
	.bz-list {height: 40rpx; font-size: 24rpx; color: #303133;}
	.bz-list text {display: inline-block; margin-right: 30rpx;}
	.con-list {flex: 1; display: flex; flex-direction: column; color: #303133; line-height: 40rpx;}
	.c-row:after {position: absolute;z-index: 3;left: 0;right: 0;height: 0;content: '';transform: scaleY(0.5);border-bottom: 2rpx solid #E4E7ED;bottom: 0;}
	.icon-arrow {font-size: 26rpx !important;color: #888 !important;}

	/* 评价 */
	.eva-section {display: flex;flex-direction: column;padding: 20rpx 30rpx;background: #fff;margin-top: 16rpx;}
	.e-header {display: flex;align-items: center;height: 70rpx;font-size: 20rpx;color: #909399;}
	.e-header .tit {font-size: 26rpx;color: #303133;margin-right: 4rpx;}
	.e-header .tip {flex: 1;text-align: right;}
	.e-header .icon-arrow {margin-left: 8rpx;}
	.eva-box {display: flex;padding: 18rpx 0;}
	.eva-box .portrait {flex-shrink: 0;width: 76rpx;height: 76rpx;border-radius: 100px;}
	.right {flex: 1;display: flex;flex-direction: column;font-size: 30rpx;color: #606266;padding-left: 24rpx;}
	.right .con {font-size: 28rpx;color: #303133;padding: 18rpx 0;}

	.right .bot {display: flex;justify-content: space-between;font-size: 24rpx;color: #909399;}
	/*  详情 */
	.detail-desc {background: #fff;margin-top: 16rpx; width: 100%; height: 900rpx;}
	.d-header {display: flex;justify-content: center;align-items: center;height: 78rpx;font-size: 26rpx;color: #303133;position: relative;}
	.d-header text {padding: 0 18rpx;background: #fff;position: relative;z-index: 1;}
	.d-header:after {position: absolute;left: 50%;top: 50%;transform: translateX(-50%);width: 298rpx;height: 0;content: '';border-bottom: 2rpx solid #ccc;}
	.richImg {width: 100%;}

	/* 底部操作菜单 */
	.page-bottom {position: fixed;left: 30rpx;bottom: 30rpx;display: flex;justify-content: center;align-items: center;width: 690rpx;height: 100rpx;background: rgba(255, 255, 255, .9);box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, .5);border-radius: 16rpx;z-index: 95;}
	.p-b-btn {display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 20rpx;color: #606266;width: 96rpx;height: 70rpx;}
	.iconfont {font-size: 40rpx;line-height: 48rpx;color: #909399; width: 40rpx; height: 40rpx;}
	.page-bottom .active,.page-bottom .active .iconfont {color: #fa436a; }
	.p-b-btn-img{position: absolute;top: 16rpx;width: 40rpx; height: 40rpx;}
	/* .iconfont:hover{width: 40rpx;height: 40rpx; background: url(../../static/gwcymian/shoychs.png)0rpx 0rpx no-repeat;} */
	.icon-fenxiang2 {font-size: 42rpx;transform: translateY(-2rpx);}
	.icon-shoucang {font-size: 46rpx;}
	.action-btn-group {display: flex;height: 76rpx;border-radius: 200rpx;overflow: hidden;box-shadow: 0 20rpx 40rpx -16rpx #fa436a;box-shadow: 2rpx 4rpx 10rpx rgba(219, 63, 96, 0.4);background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);margin-left: 20rpx;position: relative;}
	.action-btn-group:after {content: '';position: absolute;top: 50%;right: 50%;transform: translateY(-50%);height: 28rpx;width: 0;border-right: 2rpx solid rgba(255, 255, 255, .5);}
	.action-btn-group .action-btn {display: flex;align-items: center;justify-content: center;width: 180rpx;height: 100%;font-size: 24rpx;padding: 0;border-radius: 0;background: transparent;}

	/* 规格选择弹窗 */
	.attr-content {padding: 10rpx 30rpx;}
	.a-t {display: flex;}
	.a-t image {width: 170rpx;height: 170rpx;flex-shrink: 0;margin-top: -40rpx;border-radius: 8rpx;}
	.a-t .right {display: flex;flex-direction: column;padding-left: 24rpx;font-size: 22rpx;color: #606266;line-height: 42rpx;}
	.a-t .right .price {font-size: 28rpx;color: #fa436a;margin-bottom: 10rpx;}
	.a-t .right .selected-text {margin-right: 10rpx;}
	.attr-list {display: flex;flex-direction: column;font-size: 26rpx;color: #606266;padding-top: 30rpx;padding-left: 10rpx;}
	.item-list {padding: 20rpx 0 0;display: flex;flex-wrap: wrap;}
	.item-list text {display: flex;align-items: center;justify-content: center;background: #eee;margin-right: 18rpx;margin-bottom: 18rpx;border-radius: 48px;min-width: 56rpx;height: 56rpx;padding: 0 18rpx;font-size: 26rpx;color: #303133;}
	.selected {background: #fbebee;color: #fa436a;}
	.buy-num {width: 164rpx;height: 48rpx;line-height: 48rpx;display: flex;font-size: 24rpx;text-align: center;margin-top: 25rpx;}
	.buy-num .jian-btn {width: 48rpx;height: 100%;border-left: 1rpx solid #ccc;border-bottom: 1rpx solid #ccc;border-top: 1rpx solid #ccc;border-bottom-left-radius: 6rpx;border-top-left-radius: 6rpx;	}
	.buy-num .jian-btn.disabled {background-color: #f5f5f9;border-left: 1rpx solid #eee;border-bottom: 1rpx solid #eee;border-top: 1rpx solid #eee;color: #ccc;	}
	.buy-num .jia-btn {width: 48rpx;height: 100%;border-right: 1rpx solid #ccc;border-bottom: 1rpx solid #ccc;border-top: 1rpx solid #ccc;border-bottom-right-radius: 6rpx;border-top-right-radius: 6rpx;}
	.buy-num .jia-btn.disabled {background-color: #f5f5f9;border-right: 1rpx solid #eee;border-bottom: 1rpx solid #eee;border-top: 1rpx solid #eee;color: #ccc;}
	.buy-num input {width: 68rpx;height: 48rpx;min-height: 48rpx;text-align: center;font-size: 24rpx;border: 1rpx solid #ccc;}

	/*  弹出层 */
	.popup,.popup1 {position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99;}
	.mask {position: fixed;top: 0;width: 100%;height: 100%;z-index: 1;background-color: rgba(0, 0, 0, 0.4);}
	.layer {position: fixed;z-index: 99;bottom: 0;width: 100%;min-height: 40vh;border-radius: 10rpx 10rpx 0 0;background-color: #fff;}
	.layer .btn {height: 66rpx;line-height: 66rpx;border-radius: 100rpx;background: #fa436a;font-size: 26rpx;color: #fff;margin: 30rpx auto 20rpx;width: 80%;}

	@keyframes showPopup {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes showLayer {
		0% {
			transform: translateY(120%);
		}

		100% {
			transform: translateY(0%);
		}
	}

	@keyframes hideLayer {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(120%);
		}
	}
</style>
